<template>
  <div style="border: solid 1px #ebebeb;">
    <div style="height: 45px; background-color: #f2f2f2; padding: 10px 0px 0px 10px">
      {{name}}总览
    </div>
    <div>
      <div style="float: left; margin: 50px 20px 50px 50px">
        <div>
          <h3 style="color: red">{{ allData.todayIncrease }}</h3>
          <p>今日新增</p>
        </div>
      </div>
      <div style="float: left; margin: 50px 20px 50px 50px">
        <div>
          <h3 style="color: red">{{ allData.yesterdayIncrease }}</h3>
          <p>昨日新增</p>
        </div>
      </div>
      <div style="float: left; margin: 50px 20px 50px 50px">
        <div>
          <h3 style="color: red">{{ allData.monthIncrease }}</h3>
          <p>本月新增</p>
        </div>
      </div>
      <div style="float: left; margin: 50px 20px 50px 50px">
        <div>
          <h3 style="color: red">{{ allData.totalUserCount }}</h3>
          <p>{{ name }}总数</p>
        </div>
      </div>
      <div style="clear: both"/>
    </div>
  </div>
</template>

<script>
export default {
  name: "OverView",
  props: {
    name: {
      type: String,
    },
    allData: {
     todayIncrease: 0,
        yesterdayIncrease: 0,
        monthIncrease: 0,
        totalUserCount: 0
      }
  },
  created() {

  }
}
</script>

<style scoped>

</style>
